<div id="content">
    	       <h2>EDIT APPOINTMENTS FORMS</h2>
        <div class="clear"></div>
  </div> 
<?php if (!empty($this->message)):?>
	<div class="errorbox">
		<?php
			if (is_array($this->message))
			{ 
				foreach ($this->message as $item)
					echo "<p>$item</p>";					
			}
			else 
				echo "<p>$this->message</p>";			
		?>
	</div>
<?php endif;?>
<div id="content">
    	  <form name="mainForm" id="mainForm" class="myform" method="post" action="">
<input type="hidden" name="appoint_customer" value="<?php echo $this->appData->customer_id;?>">	  
<input type="hidden" name="appoint_id" value="<?php echo $this->appData->appointment_id;?>">	  
<table class="childtable" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td valign="top">
  
      <table width="100%" border="0">
        <tr>
          <td><div style="padding-top:5px;;padding-left:10px;border:#900 1px solid;background-color:#CCC;height:40px;line-height:25px;color:#900;font-size:14px;font-weight:bold">
           NAME: <span style="color: blue;"><?php echo $this->appData->customer_fname." ".$this->appData->customer_lname;?></span>
    	<?php 
    		  $dateFormatForJavaScript = 'd-m-Y';	
    		  $dateTmpInt = strtotime($this->appData->date);
    		  $dateTmp = date($dateFormatForJavaScript,$dateTmpInt);    			
    	 ?>
           Date: <input type="date" name='appoint_date' id='appoint_date' value='<?php echo $dateTmp; ?>'>
          </div></td>
          </tr>
        <tr>
        <td valign="top" width="200px">
	<h3>Note: </h3>
    <textarea rows="3" name="appoint_description" id="appoint_description" style="width: 98%"><?php echo $this->appData->descriptions;?></textarea>
</td>
        </tr>  
        <tr>
          <td><h2>Detail Jobs:</h2></td>
          </tr>
        <tr>
          <td>
 <!-- Job Detail -->
	 		<div class="log">
	 		
	 		</div>
            <table id="customerlistbox" class="listCustomer" width="100%" border="0"  cellspacing="0" cellpadding="0">
            <tr>
               <th scope="col" class='center' width="30px">No.</th>
               <th width="120px" scope="col">Employee Name</th>
    		   <th scope="col">For Services</th>
    		   <th scope="col" width="120px">Start Time</th>
    		   <th scope="col" width="120px">End Time</th>
    		   <th width="120px" scope="col">Command</th>
   			   <th scope="col" width="120px">More</th>
            </tr>
 <?php
 $irowCount = 0;
 	foreach ($this->detailData as $dataJobRow):
 	 $irowCount++;
 ?>
            <tr id="key_<?php echo $irowCount?>" <?php echo $irowCount%2==0?"class='row2'":"" ?>>
              <td class='center'><?php echo $irowCount?></td>
		      <td><?php echo $this->employeeListSelect("appoint_".$irowCount."_employee",$dataJobRow['employee_id']);?></td>
		      <td><?php echo $this->servicesListSelect("appoint_".$irowCount."_services",$dataJobRow['services_id']);?></td>
		      <td><?php echo $this->timeSelect("appoint_".$irowCount."_startime",$dataJobRow['start_time'])?></td>
		      <td><?php echo $this->timeSelect('appoint_'.$irowCount.'_endtime',$dataJobRow['end_time'])?></td>
		      <td><a class='delRow' onclick="delRow('<?php echo $irowCount?>')">Delete This Row</a></td>
		      <td><p onclick="showTableHtml('<?php echo $irowCount;?>')">More Employee</p></td>
			 </tr>
  <?php endforeach;?>
          </table>
 <!-- Job Detail End -->
          </td>
          </tr>
       	  <tr><td><input type="submit" value="Save Booking Form" /></td></tr>	
      </table></td>

</tr>   
    
</table>
<div id="chanhenry"></div>
<input type="hidden" name="appoint_delRow" id="appoint_delRow">

</form>      
        <div class="clear"></div> 
  </div>
  
   <!-- Goi Ajax tai day -->
 <div id="bookinglist">
 </div>
 <!-- Goi Ajax tai day --> 
  <script>
  //Xu ly script ngay thang
  <?php
	  		$dateTmpInt; 
	  ?>
	  $.ajaxSetup ({
		    cache: false
		});
			  
	var yeartmp = <?php echo date('Y',$dateTmpInt);?>;  
	var monthtmp = <?php echo date('m',$dateTmpInt)?>;
	var daytmp = <?php echo date('d',$dateTmpInt)?>;
	var str = daytmp+'-'+monthtmp+'-'+yeartmp;
	url = '<?php echo $this->baseUrl()?>/index/showlistbydate?date='+str;
	$.get(
		    url,
			function(data) { 
				$('#bookinglist').html(data);
			},
		    "html"
	);		
  	var myDate=new Date();
  	myDate.setFullYear(yeartmp,(monthtmp-1),daytmp);
	$(":date").dateinput({
		format:'dd-mm-yyyy',
		value: myDate,
		min:-1,
		max:180		
	}).change(function(event, date) 
	{
		var day = date.getDate();
		var month = date.getMonth()+1;
		var year = date.getFullYear();
		var str = day+'-'+month+'-'+year;
		url = '<?php echo $this->baseUrl()?>/index/showlistbydate?date='+str;
		$.get(
			    url,
				function(data) { 
					$('#bookinglist').html(data);
				},
			    "html"
		);	
	});

	$icount = <?php echo ($irowCount)?>;	
	function showTableHtml(keyItem)
	{
		var Item_Tr_id = keyItem.substr(keyItem.length-1,1);
		var empId = $("#appoint_"+Item_Tr_id+"_employee").val();
		var serId = $("#appoint_"+Item_Tr_id+"_services").val();
		var startTime = $('#appoint_date').val()+" "+$("#appoint_"+Item_Tr_id+"_startime_hour").val()+":"+$("#appoint_"+Item_Tr_id+"_startime_min").val() ;
		var endTime = $('#appoint_date').val()+" "+$("#appoint_"+Item_Tr_id+"_endtime_hour").val()+":"+$("#appoint_"+Item_Tr_id+"_endtime_min").val() ;
		var url =  "<?php echo $this->baseUrl()?>/index/get-more-employee/currentrow/"+(++$icount);
		$(".log").ajaxSend(function(e, xhr, settings) {
			if (url == settings.url)
			{
		   	 	$(this).text('Data loading ...');
			}
		});
		$.get(
			    url,					
				function(data) { 
					$('#customerlistbox').append(data);
					$(".log").text('');			
				},
			    "html"
		);		
	}
	
	$(".delRow").attr('title',"Note: If have one row cannot delete");
	function delRow(item)
	{
		$("#appoint_delRow").val(item);
		document.mainForm.submit();
	}

	// Overplay Customer Form

	var triggers = $(".modalInput").overlay({
		// some mask tweaks suitable for modal dialogs
		onClose:function(){
			$("#customerForm").resetForm();
		},
		mask: {
			color: '#ebecff',
			loadSpeed: 200,
			opacity: 0.9
		},
		closeOnClick: false
	});

</script>